We've now looked at several form features that apply
to textual inputs from the user. Often, though, our forms are primarily
numeric in content. There are several more form enhancements we can make
when we are dealing with numbers as form values.
In our bookstore site, a prime
candidate for a numeric form is the shopping cart. We need to allow the
user to update quantities of items being purchased, and we also need to
present numeric data back to the user for prices and totals.
Shopping cart table structure
The HTML for the shopping cart will describe one of the more involved table structures we have seen so far:
<form action="checkout.php" method="post">
<table id="cart">
<thead>
<tr>
<th class="item">Item</th>
<th class="quantity">Quantity</th>
<th class="price">Price</th>
<th class="cost">Total</th>
</tr>
</thead>
<tfoot>
<tr class="subtotal">
<td class="item">Subtotal</td>
<td class="quantity"></td>
<td class="price"></td>
<td class="cost">$152.95</td>
</tr>
<tr class="tax">
<td class="item">Tax</td>
<td class="quantity"></td>
<td class="price">6%</td>
<td class="cost">$9.18</td>
</tr>
<tr class="shipping">
<td class="item">Shipping</td>
<td class="quantity">5</td>
<td class="price">$2 per item</td>
<td class="cost">$10.00</td>
</tr>
<tr class="total">
<td class="item">Total</td>
<td class="quantity"></td>
<td class="price"></td>
<td class="cost">$172.13</td>
</tr>
<tr class="actions">
<td></td>
<td>
<input type="button" name="recalculate"
value="Recalculate" id="recalculate" />
</td>
<td></td>
<td>
<input type="submit" name="submit"
value="Place Order" id="submit" />
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="item">
Building Telephony Systems With Asterisk
</td>
<td class="quantity">
<input type="text" name="quantity-2" value="1"
id="quantity-2" maxlength="3" />
</td>
<td class="price">$26.99</td>
<td class="cost">$26.99</td>
</tr>
<tr>
<td class="item">
Smarty PHP Template Programming and Applications
</td>
<td class="quantity">
<input type="text" name="quantity-1" value="2"
id="quantity-1" maxlength="3" />
</td>
numeric form data, working withshopping cart, table structure<td class="price">$35.99</td>
<td class="cost">$71.98</td>
</tr>
<tr>
<td class="item">
Creating your MySQL Database
</td>
<td class="quantity">
<input type="text" name="quantity-3" value="1"
id="quantity-3" maxlength="3" />
</td>
<td class="price">$17.99</td>
<td class="cost">$17.99</td>
</tr>
<tr>
<td class="item">
Drupal: Creating Blogs, Forums, Portals, and
Community Websites
</td>
<td class="quantity">
<input type="text" name="quantity-4" value="1"
id="quantity-4" maxlength="3" />
</td>
<td class="price">$35.99</td>
<td class="cost">$35.99</td>
</tr>
</tbody>
</table>
</form>
This source code ordering,
while non-intuitive to designers thinking visually about the table
rendering, is useful to those with visual impairments. When the table is
read aloud by assistive devices, the footer is read before the
potentially long content, allowing the user to get a summary of what is
to come.
We've also placed a class on
each cell of the table, identifying which column of the table contains
that cell. We demonstrated some ways to find
cells in a column by looking at the index of the cell within its row.
Here, we'll make a tradeoff and allow the JavaScript code to be simpler
by making the HTML source a bit more complex. With a class identifying
the column of each cell, our selectors can become a bit more
straightforward.
Before we proceed
with manipulating the form fields, we will apply a standard line of row
striping code to spruce up the table's appearance:
$(document).ready(function() {
$('#cart tbody tr:nth-child(even)').addClass('alt');
});
Once again, we make sure to only select rows to color if they are in the body of the table:
